<template>
	<view class="upload-wrapper" @click="uploadBankCard">
		<img class="upload-bg" :src="formData.image ||
			'https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/bg-card-bank.png'
			" />
		<view class="upload-button" v-if="!formData.image">
			<image class="upload-img" src="https://jhl-pay.oss-cn-shenzhen.aliyuncs.com/agent/ico-upload-bank.png" />
			<view class="upload-text">点击拍摄或上传银行卡</view>
		</view>
	</view>

	<view class="form-wrapper">
		<view class="row">
			<view class="label"><text>*</text>持卡人</view>
			<input v-model="formData.name" :placeholderStyle="placeholderStyle" placeholder="请输入持卡人姓名" class="value" />
		</view>
		<view class="divider"></view>
		<view class="row">
			<view class="label"><text>*</text>银行卡号</view>
			<input v-model="formData.cardNo" type="number" :placeholderStyle="placeholderStyle" :maxlength="19"
				placeholder="自动识别，可修改" class="value" style="width: 80%" />
		</view>
		<view class="divider"></view>

		<view class="row">
			<view class="label"> <text>*</text>开户主行 </view>
			<input v-model="formData.bankName" :placeholderStyle="placeholderStyle" placeholder="自动识别，可修改"
				class="value" />
		</view>
		<view class="divider"></view>
		<view class="row">
			<view class="label"> <text>*</text>预留手机号 </view>
			<input v-model="formData.phone" :placeholderStyle="placeholderStyle" placeholder="请输入在银行预留的手机号码"
				class="value" />
		</view>
	</view>
	<view class="btn-list">
		<view class="btn-base w200 gray" @click="childUpBtn()">上一步</view>
		<view class="btn-base w470 blue" @click="childNextBtn()">下一步</view>
	</view>

</template>

<script setup>
	import {
		ref,
		defineEmits
	} from "vue";
	import {
		useStore
	} from "@/store/index";
	import {
		getOsssSignature,
		uploadImg
	} from "@/utils/upload";
	import {
		showModal,
		showToast
	} from "@/utils/toast";
	import {
		queryBankCardInfo,
		queryBankName
	} from "@/api/common";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onlyNumberReg,
		onlyCnReg
	} from "@/utils/regExp";
	/** store实例 */
	const store = useStore();
	// 定义要触发的事件
	const emit = defineEmits(['upBtn', 'nextBtn']);
	// 提示文字样式
	const placeholderStyle = "color: #999999;";

	// 表单数据
	let formData = ref({
		image: '',
		name: '',
		cardNo: '',
		bankName: '',
		phone: '',
		bankId: ''
	});
	// OSS签名
	let ossConfig = ref({});
	// 当前代理姓名、身份证号
	let agentName = ref(null);

	onLoad(async () => {
		// oss签名配置
		// ossConfig.value = await getOsssSignature("agent");
	});

	// 姓名
	function nameChange(ev) {
		formData.value.name = onlyCnReg(ev.detail.value);
	}

	// 银行卡号
	function noChange(ev) {
		formData.value.no = onlyNumberReg(ev.detail.value);
	}

	// 上传银行卡
	function uploadBankCard() {
		console.log("888888888")
		uploadImg(ossConfig.value)
			.then((res) => {
				formData.value.image = res;

				// 识别银行卡
				return queryBankCardInfo({
					params: {
						url: res,
					},
				});
			})
			.then((res) => {
				console.log("res=" + JSON.stringify(res))
				const {
					bankName,
					cardNum
				} = res;
				formData.value.cardNo = cardNum;
				formData.value.bankName = bankName;
				getBankId(bankName)

			})
	}

	// 账户类型切换
	function accountTypeChange(type) {
		formData.value.accountType = type;
	}

	// 切换是否默认账户
	function defaultChange(e) {
		formData.value.defaults = e.detail;
	}
	const childUpBtn = () => {
		emit('upBtn');
	}
	const childNextBtn = () => {
		console.log("formData.value", formData.value)
		emit('nextBtn', formData.value, 3)
	}
	// 获取银行id
	const getBankId = (val) => {
		queryBankName({
				params: {
					bankName: val,
				},
			})
			.then((res) => {
				console.log("8888888", res)
				formData.value.bankId = res.payload
			})
			.catch(() => {

			});
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>